<template>
    <div>
    <div class="categoryIcon">
      <van-grid :gutter="10" :border="false">
        <van-grid-item v-for="item in category" :key="item.name" @click="jump(item)">
          <div class="circle-background">
               <van-image :src="item.img" ></van-image>
               <div class="image-text">{{item.name}}</div>
          </div>
        </van-grid-item>
      </van-grid> 
  </div>

    </div>
</template>

<script>
export default {
    props:{
        category:{
            type:Array,
            default:()=>[]
        }
    },
    methods:{
        jump(item){
            // this.$router.push({path:item.path})
            // console.log(this.$store.state);
            this.$store.commit('setActiveName', item.name)
            this.$router.push({path:'/show'})
            // console.log(this.$store.state);
        }
    }
}
</script>

<style lang="scss" scoped>
  .categoryIcon{
    margin-top: 15px;
  }
    .van-grid-item::v-deep{
    width: 50px;
    height: 80px;
    .circle-background {
      width:26px;
      height: 26px;
      border-radius: 50%;
      background-repeat: no-repeat;
      background-image:url(	'https://cdn7.axureshop.com/demo/1564251/images/%E7%BB%84%E4%BB%B6_%E8%A7%84%E8%8C%83/u1090.png') ;
        .van-image{
            position: relative  !important;
            top: -7px; /* 根据需要调整垂直偏移量 */
            left: -6px; /* 根据需要调整水平偏移量 */
          }
        .image-text{
          margin-top: 12px;
          position: relative;
          left: -6px;
          width: 48px;
          font-size: 11px;
          }
      }
  }

</style>